<template>
  <div class="search">
    <Loading v-if="loading"></Loading>
    <template v-else>
      <div class="top">
        <div class="back" @click="toback"></div>
        <div class="inp">
          <span></span>
          <input
            type="text"
            v-model="val"
            :placeholder="hotsearchlist[1].title"
            @keyup.enter="action"
            @input="tosuggest"
          />
          <p @click="clearval" v-if="val"></p>
        </div>
        <h3 @click="action">搜索</h3>
      </div>
      <div class="todown">
        <HotSearch
          v-if="onHotSearch"
          :hotsearchlist="hotsearchlist"
          :historylist="historylist"
          @toclear="toclear"
          @gotosearch="gotosearch"
        ></HotSearch>
        <Suggest
          v-if="onsuggest"
          :suggests="suggests"
          :suggestloading="suggestloading"
          @gotosearch="gotosearch"
        ></Suggest>
        <SearchList
          v-if="onSearch"
          :searchlist="searchlist"
          :searchloading="searchloading"
        ></SearchList>
      </div>
    </template>
  </div>
</template>

<script>
import HotSearch from "@/components/HotSearch.vue";
import Suggest from "@/components/Suggest.vue";
import SearchList from "@/components/SearchList.vue";
import Loading from "@/components/Loading.vue";
import { mapState } from "vuex";
export default {
  components: {
    HotSearch,
    Suggest,
    SearchList,
    Loading,
  },
  data: function () {
    return {
      loading: false,
      suggestloading: false,
      searchloading: false,
      onsuggest: false,
      onHotSearch: true,
      onSearch: false,
      hotsearchlist: [],
      val: "",
      historylist: [],
      suggests: [],
      timmer: null,
      searchlist: [],
    };
  },
  created: function () {
    this.loading = true;
    this.axios
      .get("https://apis.netstart.cn/douguo/recipe/search/hot")
      .then((res) => {
        this.hotsearchlist = res.data.result.suggestdetails;
        this.loading = false;
      });
    localStorage.getItem("history")
      ? (this.historylist = JSON.parse(localStorage.getItem("history")))
      : [];
  },
  beforeRouteEnter(to, from, next) {
    if (from.fullPath.split("?")[0] != "/detail") {
      // console.log(from.fullPath);
      next((vm) => {
        // vm.lastrouter = from.fullPath;
        vm.$store.commit("savesearchrouter", from.fullPath);
        if (from.fullPath == "/classify" && vm.$store.state.classifysearch) {
          vm.val = vm.$store.state.classifysearch;
          vm.action();
        }
      });
      // (vm) => {
      // vm;
      // vm.store.commit("savesearchrouter", from.fullPath);
      // }
    } else {
      next();
    }
  },
  computed: {
    ...mapState(["searchlastrouter"]),
  },
  methods: {
    gotosearch(str) {
      this.val = str;
      this.action();
    },
    toback() {
      if (!this.onHotSearch) {
        this.onHotSearch = true;
        this.onsuggest = false;
        this.onSearch = false;
        this.val = "";
      } else {
        this.$router.push({ path: this.searchlastrouter });
      }
    },
    action() {
      this.onHotSearch = false;
      this.onsuggest = false;
      this.onSearch = true;
      this.searchloading = true;
      if (this.historylist.indexOf(this.val) == -1) {
        this.historylist.push(this.val);
      }
      //   this.val = "";
      localStorage.setItem("history", JSON.stringify(this.historylist));
      this.axios
        .get(
          `https://apis.netstart.cn/douguo/recipe/search?keyword=${this.val}`
        )
        .then((res) => {
          console.log(res.data.result);
          this.searchlist = res.data.result.list;
          this.searchloading = false;
        });
    },
    tosuggest() {
      if (this.val) {
        this.onsuggest = true;
        this.onHotSearch = false;
        this.onSearch = false;
      } else {
        this.onsuggest = false;
        this.onHotSearch = true;
        this.onSearch = false;
      }
      this.suggestloading = true;
      if (this.timmer) {
        clearTimeout(this.timmer);
      }
      this.timmer = setTimeout(() => {
        this.axios
          .get(
            `https://apis.netstart.cn/douguo/recipe/search/suggests?kw=${this.val}`
          )
          .then((ref) => {
            this.suggests = ref.data.result.suggests;
            this.suggestloading = false;
          });
      }, 300);
    },
    toclear() {
      this.historylist = [];
      localStorage.setItem("history", JSON.stringify(this.historylist));
    },
    clearval() {
      this.val = "";
      this.onsuggest = false;
      this.onHotSearch = true;
      this.onSearch = false;
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  padding: 10px 15px;
  .todown {
    margin-top: 55px;
  }
  .top {
    padding: 10px 15px;
    width: 100vw;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    .back {
      margin-right: 15px;
      width: 20px;
      height: 20px;
      background-image: url("../assets/tobb.png");
      background-size: 100%;
      background-position: center;
    }
    .inp {
      flex: 1;
      position: relative;
      span {
        display: block;
        width: 15px;
        height: 15px;
        background-image: url("../assets/search.png");
        position: absolute;
        background-size: 100%;
        background-position: center;
        top: 8px;
        left: 10px;
      }
      input {
        caret-color: #ffc830;
        text-indent: 2em;
        font-size: 12px;
        padding: 10px 5px;
        width: 100%;
        border-style: none;
        outline: none;
        background-color: #f5f5f5;
        border-radius: 5px;
      }
      p {
        position: absolute;
        width: 13px;
        height: 13px;
        background-image: url("../assets/scb.png");
        background-size: 100%;
        background-position: center;
        right: 10px;
        top: 10px;
      }
    }
    h3 {
      margin-left: 15px;
      font-size: 12px;
    }
  }
}
</style>